<template>
  <a-drawer v-model:visible="visible" :width="300">
    <template #handle>
      <div
        class="ant-pro-setting-drawer-handle"
        @click="() => setShow(!visible)"
      >
        <CloseOutlined
          v-if="visible"
          :style="{ color: '#fff', fontSize: 20}"
        />
        <SettingOutlined
          v-else
          :style="{ color: '#fff', fontSize: 20 }"
        />
      </div>
    </template>

    <div class="ant-pro-setting-drawer-content">
      <div :style="{ marginBottom: '24px' }" />
      <h3 class="ant-pro-setting-drawer-title">
        {{ $t("app.setting.pagestyle") }}
      </h3>
      <BlockCheckbox
        :list="themeList"
        :value="setting.navTheme"
        @onChange="value => changeSetting('navTheme', value)"
      />
      <a-divider />
      <h3 class="ant-pro-setting-drawer-title">
        {{ $t("app.setting.navigationmode") }}
      </h3>

      <BlockCheckbox
        :list="layoutList"
        :value="setting.layout"
        @onChange="value => changeSetting('layout', value)"
      />

      <BlockCheckbox
        i18n-render="{i18n}"
        :value="setting.layout"
        @onChange="(value) => {
          changeSetting('layout', value, null)
        }"
      />
      <LayoutSetting
        i18n-render="{i18n}"
        :content-width="setting.contentWidth"
        :fixed-header="setting.fixedHeader"
        :fix-siderbar="setting.fixSiderbar"
        :layout="setting.layout"
        @onChange="({ type, value }) => {
          changeSetting(type, value)
        }"
      />
      <a-divider />
      <h3 class="ant-pro-setting-drawer-title">
        {{ $t("app.setting.othersettings") }}
      </h3>

      <a-list :split="false">
        <a-list-item>
          <template #actions>
            <a-switch size="small" :default-checked="setting.colorWeak" @change="onColorWeak" />
          </template>

          <a-list-item-meta>
            <template #title>
              <div>色弱模式</div>
            </template>
          </a-list-item-meta>
        </a-list-item>
        <a-list-item>
          <a-switch slot="actions" size="small" :default-checked="setting.multiTab" @change="onMultiTab" />
          <a-list-item-meta>
            <div slot="title">
              多页签模式
            </div>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>
  </a-drawer>
</template>

<script>
    import { defineComponent, reactive, ref } from 'vue'
    import { CloseOutlined, CopyOutlined, NotificationOutlined, SettingOutlined } from '@ant-design/icons-vue'
    import BlockCheckbox from './BlockCheckbox'

    import { useI18n } from 'vue-i18n'
    import LayoutSetting from './LayoutSetting'
    // import "~/SettingDrawer.less";
    export default defineComponent({
        components: {
            LayoutSetting,
            BlockCheckbox,
            CopyOutlined,
            CloseOutlined,
            NotificationOutlined,
            SettingOutlined
        },
        props: {
            setting: {

                default: function() {
                    return {
                        navTheme: '',
                        multiTab: false
                    }
                }
            }
        },
        setup(props, { emit }) {
            const visible = ref(false)

            const afterVisibleChange = (bool) => {
                console.log('visible', bool)
            }

            const setShow = (show) => {
                visible.value = show
            }
            const changeSetting = (key, value) => {
                // watchEffect(() => {
                //     const nextState = {...props.setting};
                //     nextState[key] = value;
                emit('change', { type: key, value })
                // });
            }

            const onColorWeak = (value) => {
                // watchEffect(() => {
                //     const nextState = {...props.setting};
                //     nextState[key] = value;
                emit('change', { type: 'colorWeak', value })

                const app = document.body.querySelector('#app')
                value ? app.classList.add('colorWeak') : app.classList.remove('colorWeak')
                // });
            }
            const onMultiTab = (value) => {
                // watchEffect(() => {
                //     const nextState = {...props.setting};
                //     nextState[key] = value;
                emit('change', { type: 'multiTab', value })
                // });
            }
            const themeList = reactive([
                {
                    key: 'light',
                    url:
                        'https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg',
                    title: useI18n().t('app.setting.pagestyle.light')
                },
                {
                    key: 'dark',
                    url:
                        'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
                    title: useI18n().t('app.setting.pagestyle.dark')
                },
                {
                    key: 'realDark',
                    url:
                        'https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg',
                    title: useI18n().t('app.setting.pagestyle.realdark')
                }
            ])
            const layoutList = reactive([
                {
                    key: 'side',
                    url:
                        'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
                    title: useI18n().t('app.setting.sidemenu')
                },
                {
                    key: 'top',
                    url:
                        'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
                    title: useI18n().t('app.setting.topmenu')
                },
                {
                    key: 'mix',
                    url:
                        'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
                    title: useI18n().t('app.setting.mixmenu')
                }
            ])

            return {
                visible,
                afterVisibleChange,
                setShow, themeList, layoutList, changeSetting, onColorWeak, onMultiTab
            }
        }
    })
</script>
<style lang="less">
    @import './SettingDrawer.less';
</style>
